<template>
  <div :class="left" class="left_1">
    <DevReport></DevReport>
  </div>
</template>

<script setup>
import { ref } from "vue";
import DevReport from "./DevReport.vue"
import VueEvent from '../utils/event';

var left=ref("0");

function move_div(){
   if(left.value==0)
   {
     left.value="left_0";
   }else{
     left.value="0";
   }
}

 // 监听广播
VueEvent.on("RightDiv",(value)=>{ 
     console.log(value);
     move_div();
 }) 

</script>

<style>
.left_1{
    position:absolute;
    height: calc(100vh);
    background-color: #605144;
    box-shadow: -2px 8px 10px #888888;
    width:500px;
    z-index: 99;
    right: -535px;
    top:0;
    -webkit-transition:all 1s linear;
    transition: all 1s linear;
    padding: 18px;
}
/* .left_1:hover{
    right: -600px;
    /* animation:  5s;
    -webkit-animation: 5s; 
} */
.left_0{
    right: 0;
    /* animation:  5s;
    -webkit-animation: 5s; */
}

.left_div{
  margin-left: 50px;

}

.left_name{
  
  height: 30px;
}

.left_name samp{
  display: inline-block;
  height: 20px;
  color: #d0c1b1;
  font-size: 18px;
  line-height: 20px;
}

.nav_bt{
    position: relative;
    width: 20px;
    height: 20px;
    top:15px;
    left: 10px;
    cursor: pointer;
    font-size: 26px;
}
</style>